<main *ngIf="data != null">
  <p class="package-count"><span>{{ data.count }}</span> results</p>

  <ul class="package-list">
    <li class="list-item -full" *ngFor="let package of data.packages">
      <h3 class="title">
        <a [routerLink]="getDetailUrl(package)">{{ package.name }}</a>
      </h3>
      <p class="description">{{ package.description }}</p>
      <p class="metadata">
        v <a [routerLink]="getDetailUrl(package)">{{ package.latest }}</a>

        • Updated: <span>{{ package.updatedAt | date: "mediumDate" }}</span>
        <span class="package-tag" *ngFor="let tag of package.tags"
          >{{ tag }}</span
        >
      </p>
    </li>
  </ul>
  <ul class="pagination">
    <li [class.-disabled]="currentPage == 0">
      <a [routerLink]="getListUrl(currentPage - 1)">
        <span>«</span>
      </a>
    </li>
    <li [class.-disabled]="currentPage == page" *ngFor="let page of pages">
      <a [routerLink]="getListUrl(page)">
        <span>{{ page + 1 }}</span>
      </a>
    </li>
    <li [class.-disabled]="currentPage == pageCount - 1">
      <a [routerLink]="getListUrl(currentPage + 1)">
        <span>»</span>
      </a>
    </li>
  </ul>
</main>
